<template>
  <el-dialog
    title="编辑"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="close"
    width="500px"
  >
    <el-form ref="refForm" class="gl_form_mini" :model="vo" :rules="rules" size="small" label-width="80px">
      <el-form-item label="学员">
        {{ info.studentName }}
      </el-form-item>
      <el-form-item label="到课状态" prop="checkInStatusCode">
        <el-select v-model="vo.checkInStatusCode" style="width: 100%" placeholder="请选择时间类型">
          <el-option
            v-for="item in dict.checkInStatus"
            :key="item.code"
            :label="item.value"
            :value="item.code"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="应扣课时">
        {{ info.courseSchedule ? info.courseSchedule.courseAmount : '' }}
      </el-form-item>
      <el-form-item label="备注">
        <el-input
          v-model="vo.remark"
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4}"
          placeholder="请输入备注"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close">取消</el-button>
      <el-button type="primary" :loading="submitLoading" size="mini" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import {
  UpdateCheckInLogInput_Rules
} from '@/lib/validate/hall/index.js';

// import { CopyData } from '@/lib';
export default {
  props: {
    info: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      rules: new UpdateCheckInLogInput_Rules(),
      vo: {
        checkInStatusCode: '',
        remark: ''
      },
      submitLoading: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  watch: {
    info: {
      immediate: true,
      deep: true,
      handler (val) {
        if (val.id) {
          this.vo.checkInStatusCode = val.checkInStatusCode || '';
          this.vo.remark = val.remark || '';
        }
      }
    }
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    open (info) {
      this.dialogVisible = true;
    },
    close () {
      this.vo = {
        checkInStatusCode: '',
        remark: ''
      };
      this.$nextTick(() => {
        this.$refs.refForm.clearValidate();
        this.submitLoading = false;
        this.dialogVisible = false;
      });
    },
    cancelLoading () {
      this.submitLoading = false;
    },
    submit () {
      this.$refs.refForm.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          this.$emit('onSubmit', this.vo);
        }
      });
    }
  }
};
</script>
